[EuiDataGrid] Add several new footer/header customization APIs + bonus cleanup#6609
Conversation
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6609/ |
f05754b to
1ffe218
Compare
- for better organization/architecture
+ fix footer control columns rendering with `isExpandable` true as a default - should not be true + adds docs, fix broken amount total + reorder types slightly
1ffe218 to
0e1ec69
Compare
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6609/ |
- this commit isn't specifically needed by this PR, but *will* be needed once we implement a custom body renderer
0e1ec69 to
ea6b1d3
Compare
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6609/ |
JasonStoltz
left a comment
There was a problem hiding this comment.
Hey @cee-chen, this PR LGTM. I don't see anything that gives me pause. The additional additional prop props seem simple enough, the footerCellRender follows the same pattern as headerCellRender, and the refactor seems to be under tests.
| }; | ||
|
|
||
| /** | ||
| * DRY out setting up the grid footer and its refs & observers |
There was a problem hiding this comment.
Just wondering about this comment. Is this a TODO, or is this the reasoning behind why you created this hook? ... i.e., it DRYs out the setup of the grid footer.
There was a problem hiding this comment.
It'll be used in the next PR when a custom grid renderer is added. Both the custom renderer and the default virtualization renderer will need the same data grid header and footer, so this DRYs it out. I could have added that commit in the next PR, but I figured I might as well do it while here/touching footer & header things
|
Thanks Jason! Hope your first foray into the fun world of data grid wasn't too bad :) |
👋 Hi all - the biggest breaking change of this PR is around two icon type changes/renames. 1.⚠️ **The `alert` icon is now named `warning`** - <img width="103" alt="" src="https://user-images.githubusercontent.com/549407/223561599-8913e88c-676f-47cd-aaed-81b64783bd81.png" align="middle"> - This change should have been automatically converted on your behalf by the EUI team, **but if for some reason** we missed making this conversion in this PR and your icon(s) are now broken, please ping us or let us know in this PR (or fix yourself after this PR merges). - In some cases, teams were using this icon for error messages, alongside the `danger` color. In those cases, we opinionatedly changed those icon usages to the new `error` icon instead of using the old alert/warning icon. 2. 🛑 **The `crossInACircleFilled` icon has been removed, and a new `error` icon added** - <img width="84" alt="" src="https://user-images.githubusercontent.com/549407/223561892-4406bdf6-1a55-49ac-85ad-3a11eb7c090d.png" align="middle"> - The conversion for this breaking change was not straightforward. This was the path we used to determine what to change `crossInACircleFilled` usages to: - If the icon was associated with errors or error messages, we changed it to the new `error` icon. - If a "delete" action was associated with this icon, we changed it to the `trash` icon instead. - If a "clear" action was associated with this icon, we changed it to just the `cross` icon, or in some cases `minusInCircleFilled` (if used alongside `plusInCircleFilled`). - Again, if we made a mistake during this conversion or missed your plugin, please feel free to ping us. ## Summary `eui@75.1.2` ⏩ `eui@76.0.2` ## [`76.0.2`](https://github.com/elastic/eui/tree/v76.0.2) **Bug fixes** - Added a legacy `alert` alias for the `warning` `EuiIcon` type ([#6640](elastic/eui#6640)) ## [`76.0.1`](https://github.com/elastic/eui/tree/v76.0.1) **Bug fixes** - Fixed broken icons on all `isInvalid` form controls ([#6629](elastic/eui#6629)) ## [`76.0.0`](https://github.com/elastic/eui/tree/v76.0.0) - Added `pivot` glyph to `EuiIcon` ([#6605](elastic/eui#6605)) - Added the `displayHeaderCellProps` API to `EuiDataGrid`'s columns, which allows passing custom props directly to column header cells ([#6609](elastic/eui#6609)) - Added the new `headerCellProps`/`footerCellProps` APIs to `EuiDataGrid`'s control columns, which allows passing custom props directly to control column header or footer cells ([#6609](elastic/eui#6609)) - Added a new `footerCellRender` API to `EuiDataGrid`'s control columns, which allows completely customizing control column rendering (previously rendered an empty cell) ([#6609](elastic/eui#6609)) - Updated the styling of nested ordered lists in `EuiText` to align with GitHub's list style, which is a popular format used in Markdown or MDX formatting ([#6615](elastic/eui#6615)) - Added a margin-bottom property exclusively to the direct child `ul` and `ol` elements of the `EuiText` component ([#6615](elastic/eui#6615)) - Fix issue with badges appearing within an `EuiBadgeGroup`, where the CSS rule to override the `margin-inline-start` was not being applied correctly due to the order of appearance in the CSS rules ([#6618](elastic/eui#6618)) **Bug fixes** - Fixed `EuiDataGrid` footer control columns rendering with cell expansion popovers when they should not have been ([#6609](elastic/eui#6609)) - Fixed an `EuiSkipLink` bug where main content loading in progressively/dynamically after the skip link rendered was not being correctly focused ([#6613](elastic/eui#6613)) **Breaking changes** - Renamed `EuiIcon`'s `alert` to `warning` ([#6608](elastic/eui#6608)) - Removed `EuiIcon`'s `crossInACircleFilled` in favor of `error` ([#6608](elastic/eui#6608)) --------- Co-authored-by: Davey Holler <daveyholler@hey.com> Co-authored-by: Constance Chen <constance.chen@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Jon <jon@elastic.co>
Summary
This PR is a setup PR with functionality needed for #6523, and also incidentally closes #5106.
In line with our overarching goal of allowing consumers to control/customize our EuiDataGrid body more, we also need to make our header/footer rows more customizable as well to match several requested use-cases.
I strongly recommend following along by commit - I tried to include as much context in my commit messages as possible.
QA
footerCellRenderEuiCheckbox rendersGeneral checklist
@defaultif default values are missing)and playground togglescellPropsAPIs, but added new documentation for thefooterCellRenderAPIand cypress tests- [ ] Checked in both light and dark modes- [ ] Checked in mobile- [ ] Checked in Chrome, Safari, Edge, and Firefox- [ ] Checked Code Sandbox works for any docs examples- [ ] Checked for breaking changes and labeled appropriately- [ ] Checked for accessibility including keyboard-only and screenreader modes- [ ] Updated the Figma library counterpart